<template>
    <div class="container">
        <div class="box">
            <!--<div class="contact-us">
                联系我们:<span>4006916119</span>
            </div>-->
            <div class="title-box">
                <div class="txt-box cl">
                    <div class="logo-icon left"><img src="../../assets/images/login/icon-logo.png" width="100%" height="100%" alt="icon" /></div>
                    <div class="title left">AllSale·商户业务系统</div>
                </div>
            </div>
            <div class="img-login-box cl">
                <div class="img-box left">
                    <img src="../../assets/images/login/pic1.png" width="100%" height="100%" alt="">
                </div>
                <div class="login-box left">
                    <div class="from-item">
                        <i class="input-icon icon-merchant"></i>
                        <input class="ws-input input-merchant" @click="showLayer" type="text" v-model="loginForm.shop" readonly placeholder="请选择商户">
                        <i class="ws-select-icon" @click="showLayer"></i>
                    </div>
                    <div class="from-item">
                        <i class="input-icon icon-user"></i>
                        <input class="ws-input" id="input-user" v-model="loginForm.username" @keypress="inpute" autofocus="autofocus" placeholder="请输入用户名称" />
                    </div>
                    <div class="from-item">
                        <i class="input-icon icon-password"></i>
                        <input class="ws-input" v-model="loginForm.password" @keypress="inpute" type="password" placeholder="请输入登录密码" />
                    </div>
                    <div class="from-item">
                        <button class="ws-login-btn" @click="login" :disabled="flag" :class="{ btnDisabled:flag }">登录</button>
                    </div>
                    <div class="from-item cl">
                        <div class="ws-clause left">
                            <input type="checkbox" v-model="loginForm.clause" /> <span @click="showClause"><i>商户入驻协议</i></span>
                        </div>
                        <div class="add-merchant right">
                            <a href="#" @click="jumpMerchantsSettled">入驻电商</a>
                        </div>
                    </div>
                    <div class="from-item cl">
                        <div v-show="vad.isShow" class="error-box left">
                            <i class="ivu-icon ivu-icon-information-circled" style="padding-right: 5px"></i>
                            <span v-text="vad.message"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-box cl" v-show="newsFlag">
                <div class="news-txt left">
                    通过设置icon属性在Button内嵌入一个Icon，或者直接在Button内使用Icon组件。使用Button的icon属性，图标位置将在最左边，如果需要自定义位置，需使用Icon组件。
                </div>
            </div>
        </div>
        <div id="ws-mask" class="mask">
            <div class="layer-box">
                <div class="close-box cl">
                    <img class="right" src="../../assets/images/login/icon-close.png" width="100%" height="100%" alt="关闭" @click="showLayer">
                </div>
                <div class="search-box">
                    <i class="icon-search"></i>
                    <input id="ws-input-search" type="text" v-model="query" placeholder="请输入商户店铺名称">
                    <button class="ws-search-btn" @click="search">搜索</button>
                </div>
                <div class="ws-line"></div>
                <div class="display-box">
                    <ul>
                        <li v-if="tempList.length" v-for="item in tempList" :value="item.tenantId" v-text="item.shop" @click="doSelect(item)" v-bind:class="{wsActive: isActive(item)}"></li>
                        <div class="ws-empty" v-if="!tempList.length">
                            暂无商户信息
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div id="ws-mask-clause-box" class="mask">
            <div class="clause-layer-box">
                <div class="close-box cl">
                    <img class="right" src="../../assets/images/login/icon-close.png" width="100%" height="100%" alt="关闭" @click="showClause">
                </div>
                <div class="content-box">
                    <h2>华龄金管家入驻协议</h2>
                    <p> 在接受《华龄金管家入驻协议》（以下简称“本协议”）之前，请您仔细阅读本协议的全部内容。如果您对本协议的条款有任何疑问，请向华龄金管家运营人员咨询。如果您不同意本协议的任何内容，或无法理解华龄金管家对条款的解释，请不要进行后续操作
                    </p>
                    <p> 本协议由华龄金管家与您签署。华龄金管家平台的app包括但不限于华龄金管家，当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议及所涉及的华龄金管家所有协议的全部内容，并与华龄金管家达成协议。您承诺接受并遵守本协议的约定，届时您不应以未阅读本协议的内容或者未获得华龄金管家对您问询的解答等理由，主张本协议无效、或要求撤销本协议。本协议的条款可由华龄金管家随时更新，华龄金管家将在网页上公布修改内容，且无须另行通知。修改后的使用协议一旦在网页上公布即有效代替原来的服务协议。
                    </p>
                    <h3>一、服务说明</h3>
                    <p>1.华龄金管家软件向用户提供如下服务：发布、查询商品和服务信息；达成交易意向并进行交易；对商家和其他用户进行评价；收藏网购商品和店铺；在华龄金管家平台发商品、上传图片；参加华龄金管家组织的活动以及使用其它信息服务及技术服务等；</p>
                    <p>2.除非本使用协议另有其它明示规定，增加或强化目前本服务的任何新功能、包括所推出的新产品，均受到本使用协议的规范。您了解并同意，本服务仅依其当前所呈现的状况提供，对于任何用户信息或个人化设定的时效、删除、传递错误、未予储存或其它任何问题，华龄金管家均不承担任何责任。华龄金管家保留不经事先通知为维修保养、升级或其它目的暂停本服务任何或全部部分的权利；</p>
                    <p>3.您同意遵守中华人民共和国相关法律法规的所有规定，并对以任何方式使用您的密码和您的帐号或是以其他方式使用本服务的任何行为及结果承担全部责任。如果您的行为违反国家法律和法规的任何内容， 有可能构成犯罪的，将被追究刑事责任，并由您承担全部法律责任。同时如果华龄金管家有理由认为您的任何行为，包括但不限于您的任何言论或其它行为违反或可能违反国家法律和法规的任何规定、损害了华龄金管家的利益，华龄金管家可在任何时候不经任何事先通知终止向您提供服务，并保留进一步追究您责任的权利。</p>
                    <h3>二、注册义务</h3>
                    <p>1.您同意以下事项：依华龄金管家注册提示填写正确的注册手机、密码和用户名，并确保今后更新的登录手机、用户名、头像等资料的有效性和合法性。若您提供任何违法、不道德或华龄金管家认为不适合在华龄金管家平台上展示的资料，或者华龄金管家有理由怀疑您的资料属于程序或恶意操作，华龄金管家有权暂停或终止您的帐号，并拒绝您于现在和未来使用华龄金管家平台服务的任何或全部部分。</p>
                    <p>2.华龄金管家无须对任何用户的任何登记资料承担任何责任，包括但不限于鉴别、核实任何登记资料的真实性、正确性、完整性、适用性及/或是否为最新资料的责任。</p>
                    <h3>三、帐户安全</h3>
                    <p>当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，您即受本协议约束。您可以使用您提供或确认的手机、用户名或者华龄金管家允许的其他方式作为登陆手段进入平台。保护您的账户安全，是您的责任。您应对您的所有账户活动完全负责。</p>
                    <p>您了解并同意：</p>
                    <p>1.您在此明确授权，您在华龄金管家的账户注册信息已授权华龄金管家网站使用，您在此同意并认可，华龄金管家有权将华龄金管家网站的任何数据提供、透露或转移至关联公司及他们各自的被许可方和许可方。</p>
                    <p>2.您的华龄金管家账号遭受未获授权的使用、或者发生其它任何安全问题时，您应立即通知华龄金管家运营人员；</p>
                    <p>3.您应对您的账号及账号中的所有行为负责。如果由于您未妥善保管自己的账户而对您、华龄金管家或第三方造成任何损失或损害，华龄金管家无法也不承担任何责任，您将负全部责任；</p>
                    <p>4.您承诺不以任何违法违规或违反华龄金管家平台协议的方式使用您的账户。上述违法违规行为包括但不限于利用第三方软件获取多个验证码或获取多个账户等方式，利用病毒或软件攻击华龄金管家平台，恶意使用任何账户从华龄金管家平台获取不正当利益等情形。</p>
                    <h3>四、隐私权策</h3>
                    <p>您提供的登记资料及华龄金管家保留的有关您的其它资料都将受到中国国家法律的约束。根据有关法律法规，华龄金管家在此郑重提请您注意，任何经由本平台而发布、上传的文字、资讯、资料、 音乐、照片、图形、视讯、信息或其它资料（以下简称“内容”），无论系公开还是私下传送，均由内容提供者承担责任。华龄金管家仅为用户提供内容的存储空间而无法控制内容本身，因此不保证内容的正确性、 完整性或品质优劣。您已预知在您使用本平台时，可能会接触到令您不快、不适或厌恶的内容。在任何情况下，华龄金管家均不为任何内容负责。但华龄金管家有权依法停止传输任何前述内容并采取相应措施，包括但不限于暂停、中止或终止您使用本平台的全部或部分服务。华龄金管家将保存相关记录，并保留追求您责任的权利。</p>
                    <h3>五、所有权</h3>
                    <p>华龄金管家拥有华龄金管家平台及其关联公司（包括但不限于华龄金管家注册商标、标志、产品、服务名称、相关文档等）的全部权利、所有权以及知识产权。您在此同意并认可，华龄金管家有权将华龄金管家网站的任何数据提供、透露或转移至关联公司及他们各自的被许可方和许可方。</p>
                    <h3>六、服务及收费</h3>
                    <h4>1.保证金</h4>
                    <p>1) 卖家向华龄金管家交纳 ￥ 1000  元商品质量和服务保证金，保证卖家遵从国家法律法规规定、本协议约定及华龄金管家平台规则。</p>
                    <p>2) 如卖家在合作期间内无任何违法违规行为，双方终止合作后，卖家可向华龄金管家提出书面清户申请，华龄金管家审核通过后三个月内华龄金管家将保证金退还卖家。卖家同意该保证金不计算利息。</p>
                    <p>3) 若因卖家违法违约行为，给华龄金管家造成损失的，华龄金管家有权从保证金中扣除部分或全部保证金。保证金不足以弥补损失的，华龄金管家有权从卖家的销售款中扣划。华龄金管家扣划保证金后，卖家应在接到华龄金管家通知后3日内补齐，否则华龄金管家有权自卖家销售款中扣划。</p>
                    <p>4) 华龄金管家有权单方在此协议履行期间通过修改本协议的方式修改保证金额度，具体的额度修改由华龄金管家结合实际平台运营成本和市场情况设定。对于上述关于保证金额度的修改，华龄金管家将提前7日以平台公示的方式通知卖家，若卖家决定不接受上述修改，应在3日内书面向华龄金管家申请退出平台。若卖家在上述期间届满之后未通知华龄金管家，将视为卖家已接受上述修改，卖家应按照修改之后的协议履行其义务。</p>
                    <p>5）华龄金管家从卖家的销售额中收取2%的费用作为平台运营管理费用，卖家提现时，提现金额为可提金额的98%。</p>
                    <h3>七、发货</h3>
                    <p>1.卖家必须在买家付款成功后72小时内完成订单管理中的发货操作，若卖家未在72小时内发货，则华龄金管家有权将货款原路退还至买家账户。</p>
                    <p>2.若因物流方的原因导致揽收时间晚于商家实际发货时间，则以物流方提供的实际发货时间证明为准（物流官网需要产生揽收记录）。</p>
                    <h3>八、售后及维权</h3>
                    <p>1.您了解并同意，买家确认收货即代表交易完成，则交易结束。华龄金管家对交易结束之后的任何纠纷不作处理，买卖双方需自行协商解决。</p>
                    <p>2.在确认收货前，买家可申请退货／退款。若买家申请退款被拒或申请退货时，则维权入口开启。买家申请维权之后二十四（24）小时之内为买卖双方的协商时间，二十四（24）小时之后工作人员将介入处理。</p>
                    <h3>九、禁售商品管理</h3>
                    <p>为了规范华龄金管家及华龄金管家的经营秩序，明确华龄金管家用户与华龄金管家的权利义务，保障各方合法权益，卖家应遵守国家关于商品禁售的相关规定以及华龄金管家对商品的有关要求。</p>
                    <h3>十、资金安全</h3>
                    <p>1.您在华龄金管家的任何线上收入都将由华龄金管家的平台账户代收。商品确认收货之后，卖家可申请提现。</p>
                    <p>2.华龄金管家在此郑重声明，华龄金管家将配合银行共同打击无真实交易背景的虚假交易、银行卡转账套现或洗钱等被禁止的交易行为，您需如实交易，否则款项不能提现。</p>
                    <h3>十一、责任限制</h3>
                    <p>您同意不会利用本平台进行任何违法或不正当的活动，包括但不限于下列行为∶</p>
                    <p>1.发布或以其它方式传送含有下列内容之一的信息：反对宪法所规定的基本原则的；危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；损害国家荣誉和利益的；煽动民族仇恨、民族歧视、破 坏民族团结的；破坏国家宗教政策、宣扬邪教和封建迷信的；散布谣言、扰乱社会秩序、破坏社会稳定的；散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；侮辱或者诽谤他人、侵害他人合法权 利的；含有虚假、诈骗、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容；含有中国法律、法规、规章、条例以及任何具有法律效力之规范所限制或禁止的其它 内容的；含有华龄金管家认为不适合在华龄金管家展示的内容的；</p>
                    <p>2.以任何方式危害他人及华龄金管家的的合法权益（包括但不限于盗刷他人银行账户、现金券套现、虚假交易等违法违规行为）；</p>
                    <p>3.冒充其他任何人或机构，或以虚伪不实的方式陈述或谎称与任何人或机构有关的内容；</p>
                    <p>4.依据任何法律、合约或法定关系，知悉并发布、发送或以其他方式传送保密资料（例如揭露因雇佣关系或保密合约所得知的内部资料、专属机密等）；</p>
                    <p>5.发布、发送或以其它方式传送侵害他人著作权、专利权、商标权、商业秘密、或其它专属权利的内容等；</p>
                    <p>6.发布、发送或以其它方式传送任何广告信函、促销资料、垃圾邮件、滥发信件、连锁信件、直销，或其它任何形式的劝诱资料等；</p>
                    <p>7.发布、发送或以其它方式传送干扰、破坏或限制任何计算机软件、硬件或通讯设备功能的计算机病毒，包括但不限于木马程序（Trojan horses）、蠕虫（worms）、计时炸弹（Time Bombs）、 删除蝇（Cancelbots）或其它计算机代码、档案和程序的任何资料等；</p>
                    <p>8.干扰或破坏本平台及与本平台相关连的服务器或网络，违反本平台连线网络的规定、程序、政策及规范等；</p>
                    <p>9.跟踪、人肉搜索或以其它方式骚扰他人；</p>
                    <p>10.故意或无意违反任何当地法规及国家法律，以及任何具有法律效力的规则；</p>
                    <p>11.未经合法授权而截获、篡改、收集、储存或删除他人信息、站内资料或其它数据；</p>
                    <p>12.利用第三方软件或非法手段在华龄金管家平台上获取不正当利益，利用病毒或非法软件攻击华龄金管家平台等恶意行为。</p>
                    <h3>十二，责任范围</h3>
                    <p>1.您已认可，华龄金管家未对平台用户的行为进行全面监控，您同意将自行判断您所发布的任何信息的正确性、完整性及实用性并承担所有风险，而不依赖于华龄金管家。华龄金管家有权自行拒绝和删除违反本协议或其它引起华龄金管家不适及反感的内容；</p>
                    <p>2.您了解并同意，华龄金管家依据法律法规及本协议的要求，认定必须将您发布的内容加以保存或揭露时，得以保存或揭露。华龄金管家将遵守法律程序、执行本协议内容、回应第三方提出的权利和主张，以保护华龄金管家、 华龄金管家用户及公众的权利、财产安全；</p>
                    <p>3.您同意，不对华龄金管家平台服务的任何部分，进行复制、拷贝、出售、转售或用于任何其它商业目的；</p>
                    <p>4.您已了解，国际互联网拥有无国界性。您同意遵守当地所有关于网上行为的法律法规，您特别同意遵守任何地区的所有关于互联网行为的法律法规，包括但不限于中国及任何海外地区；</p>
                    <p>5.本协议的“公开使用区域”指一般公众可以使用的区域。您应保证您在华龄金管家平台发布的所有内容已取得合法授权或您持有创作权，并且该内容不侵犯任何第三方的合法权益。您同意华龄金管家持有您在华龄金管家平台 所发布的上述内容在全球范围内免费的、不可撤销的、永久的、可再许可或转让的独家使用权许可。华龄金管家依据该许可将有权以展示、推广及其他不为我国法律所禁止的方式使用。</p>
                    <h3>十三、责任赔偿</h3>
                    <p>您理解并同意，若您违反本协议、或您侵害他人合法权益而衍生或导致的任何第三方提出的索赔，（包括合理的律师费），您将赔偿华龄金管家及其子公司、关联企业、高级职员、代理人、品牌共有人或其它合作伙伴及员工，遭受的损失，并承担由此引发的全部法律责任。</p>
                    <h3>十四、处罚标准</h3>
                    <p>1.禁止发布违禁商品，否则华龄金管家将关闭该账号。</p>
                    <p>2.禁止出售假冒商品，否则华龄金管家将关闭该账号。</p>
                    <p>3.华龄金管家将根据个案的具体情况来权衡处罚该个案并追究其法律责任。</p>
                    <h3>十五、您的专属权利</h3>
                    <p>1.华龄金管家在适当情形下，自行决定中止或终止侵害他人权益的账户；</p>
                    <p>2.华龄金管家平台服务与资料是基于“现状”提供，而且华龄金管家拒绝对于“服务”、“资料”或“产品”给予任何明示或暗示保证，包括但不限于，为商业使用或适合于特定目的。华龄金管家对于因“服务”、“资料”或 “产品”所造成的任何直接、间接、附带的或因此而导致的衍生性损失概不负责；</p>
                    <p>3.如果您对他人的知识产权造成了侵害，华龄金管家网站将依照国家法律法规、或在适当的情形下，依照其服务条款或相关规定，删除特定内容、中止或终止您对账户的使用；</p>
                    <p>4.若您认为您的著作权遭遇侵害或您的知识产权被侵犯，根据《信息网络传播权保护条例》的规定，您需及时与华龄金管家客服联系并提供详实的举证材料。或请到中华人民共和国国家版权局下载《要求删除或断 开链接侵权网络内容的通知》（下称《删除通知》）的示范格式并提交予华龄金管家网站。如果您不明白《删除通知》的内容，请登录中华人民共和国国家版权局查看《要求删除或断开链接侵权网络内容的通知》 填写说明。</p>
                    <h3>十六、华龄金管家专属权利</h3>
                    <p>1.您了解并同意，华龄金管家平台服务及本服务所使用的相关软件受相关知识产权及法律的保护。经由本服务或广告商向您呈现的赞助广告或信息内容，也受到著作权、商标权、服务商标、专利权及其它专属权利的法律保护；</p>
                    <p>2.未经华龄金管家或广告商明示授权，您不得擅自修改、出租、出借、出售、散布本服务及软件的任何部分及全部。禁止据以制作衍生著作，或使用擅自修改后的软件；</p>
                    <p>3.华龄金管家仅授予您个人不可移转及非专属的使用权，使您得以使用其软件，但您不得（并不得允许任何第三方）复制、修改、创作衍生著作、进行还原工程、反向组译，或以其它方式发现原始码，或出售、 转让、再授权或提供软件设定担保，或以其它方式移转软件的任何权利；</p>
                    <p>4.您同意将通过由华龄金管家所提供的界面而非任何其它途径使用本服务。</p>
                    <h3>十七、担保及保证</h3>
                    <p>您明确了解并同意：</p>
                    <p>1.本协议的任何规定导致华龄金管家平台对造成您人身伤害，或因故意或重大过失而造成您财产损失，华龄金管家应承担相应责任；</p>
                    <p>2.您个人全权承担您使用本服务的风险。华龄金管家负责按“现状”及“现有”基础向您提供华龄金管家平台服务。但华龄金管家对华龄金管家平台服务不作任何明示或暗示的担保或保证，包含但不限于华龄金管家平台服务的商业适用性、 没有错误或疏漏、持续性、准确性、可靠性、适用于某特定用途。同时，华龄金管家也不对华龄金管家平台服务所涉及的技术及信息的有效性、准确性、正确性、可靠性、质量、稳定、完整和及时性作出任何承诺和保证。</p>
                    <p>3.华龄金管家不保证您经由本服务购买或取得之任何产品、服务、资讯或其它信息将符合您的期望；</p>
                    <p>4.您知晓并同意，在您使用华龄金管家平台过程中因任何资料下载而导致您电脑系统的任何损坏或数据流失等后果，由您自行承担； </p>
                    <p>5.您经由华龄金管家平台取得的任何建议或信息，无论是书面或口头形式，不构成本协议以外的任何担保及保证（协议中有明确规定的保证除外）。</p>
                    <p>6.您同意华龄金管家及／或合作单位使用您的肖像、姓名及／或其他合法权益。在您注册成功并使用华龄金管家平台服务后，您的一切信息将一并授权给华龄金管家和/或合作单位使用。</p>
                    <p>7.您授权华龄金管家向您发送商业性信息的权利，即授权允许华龄金管家通过各种合适的通讯联系方式发送信息给您，例如提醒您付款、向您传递各类商品的促销、广告和优惠等。</p>
                    <p>8.您知悉并了解，华龄金管家平台属于全品类的服务交易平台，您在发表或购买商品的同时，应对交易细节进行详细、客观的沟通约定，并遵守相关的约定事项。若因交易约定不详导致的交易纠纷，由您自行承担风险。</p>
                    <p>9.您知悉并了解，线下见面交易存在较大的人身财产安全及交易纠纷风险，如因线下见面交易产生纠纷及风险，由您自行承担。</p>
                    <p>10.您不得在华龄金管家发表恶意内容，包含评论、商品信息，禁止对任何人进行人身攻击。一经发现，华龄金管家有权删除恶意内容并对攻击账号进行封禁，并保留进一步追究您责任的权利。</p>
                    <p>11.您不得在华龄金管家内滥用华龄金管家及华龄金管家官方产品标识及相关活动产品宣传资料。一经发现，华龄金管家将视情节对您进行警告、暂停、中止或终止华龄金管家账号并保留进一步追究您责任的权利。详情请阅读华龄金管家网站内 《滥用标识和交易作弊实施细则》。</p>
                    <p>12.您不得在华龄金管家内进行任何形式的违规行为，一经发现，华龄金管家将视情节对您进行惩罚。</p>
                    <p>13.您在华龄金管家的任何线上交易收入都将由华龄金管家的平台账户代收。您同意委托华龄金管家作为代收账户代您收取所售商品（如有）的货款并将之汇付给您指定的有效银行账户（限工商银行、农业银行、建设银行、 招商银行、交通银行、兴业银行、中信银行、广发银行、广大银行、民生银行及浦发银行）或有效支付宝账户。商品确认收货7天之后，您可申请提现。请您保管好自己的银行账号及密码，一旦发现任何可疑现象请即刻通知银行及华龄金管家客服。</p>
                    <h3>十八、免责声明</h3>
                    <p>1.您明确同意将您所发布的文字、资讯、资料、音乐、照片、图形、视讯、信息或其它资料上传到互联网，所有可能被其他组织或个人复制、转载、或做其它用途的风险及后果将由您自行承担。华龄金管家不承担任何责任；</p>
                    <p>2.微博、微信、人人网等官方账号对您的相关文字、资讯、资料、音乐、照片、图形、视讯、信息或其它个人资料进行推广发布的，不属于对您相关权益的侵权行为、华龄金管家不承担任何责任；</p>
                    <p>3.针对华龄金管家上的任何恶意评论，经您的举报我们会采取删除处理，但不保证服务一定能满足您的要求，也不对该恶意评论承担何法律责任；华龄金管家有权制定限制华龄金管家平台的措施及约束协议，包含但不限于保留您所发布内容的最长期限，以及一定期限内您使用华龄金管家平台的次数上限或时间上限，对于由此所带来的不便，华龄金管家不承担任何责任；</p>
                    <p>4.您通过华龄金管家平台发布或传送的任何信息、通讯资料等，若未储存或被删除，华龄金管家不承担任何责任；</p>
                    <p>5.您通过华龄金管家平台与广告商或其他第三方进行任何形式的往来，或参与促销活动，包含相关商品或服务的付款及交付，以及达成的其它任何相关条款、条件、保证或声明，完全为您与广告商或第三方之间的行为。对于您因前述任何交易可能遭受的任何损失及损害，华龄金管家不承担任何法律责任；</p>
                    <p>6.基于以下原因而造成的，包括但不限于利润、信誉、应用、数据损失或其它损失，华龄金管家不承担任何直接、间接、附带、特别、衍生性或惩罚性赔偿责任：华龄金管家平台服务的使用或无法使用；通过华龄金管家平台购 买或取得的任何商品、数据、信息、服务，收到的讯息，或缔结交易而产生的成本；您的传输或数据遭到未获授权的存取或变造；任何第三方在华龄金管家平台所作的声明或行为；与华龄金管家平台相关的其它事宜，但本协议有明确规定的除外；对于任何第三方以任何方式发布、投递的欺诈性信息使您受到的经济损失，华龄金管家不承担任何责任。</p>
                    <h3>十九、修改及终止服务</h3>
                    <p>1.您同意，华龄金管家有权自行全权决定以任何理由不经事先通知的修改、中止或终止向您提供部分或全部华龄金管家平台服务。对于上述服务的任何修改、暂停或终止，华龄金管家无须为此向您或任何第三方承担任何责任；</p>
                    <p>2.您理解并同意，华龄金管家有权因任何理由，包含但不限于您缺乏使用，或华龄金管家认为您已经违反本协议的约定，终止本协议，并永久冻结（注销）您的华龄金管家账户及所有内容；</p>
                    <p>3.您承认并同意，华龄金管家可立即关闭或删除您的账号及您账号中所有相关信息及文件，及/或禁止继续使用前述文件或本服务。此外，您同意华龄金管家为此对您或第三方不承担任何责任。</p>
                    <h3>二十、华龄金管家商标信息</h3>
                    <p>华龄金管家、华龄金管家网站以及其它华龄金管家注册商标、标志、产品、服务名称，均为华龄金管家公司商标（以下简称“华龄金管家标记”）。未经华龄金管家事先书面同意，您不得将华龄金管家标记以任何方式展示、使用或另行处理，或表示您有 权展示、使用或另行处理华龄金管家标记。</p>
                    <h3>二十一、其他约定</h3>
                    <p>1.本协议、华龄金管家服务协议、免责声明和华龄金管家禁售商品管理细则构成您与华龄金管家的全部协议，并规范您对本服务的使用行为。在您使用相关服务、第三方内容或软件时，应遵从其附加条款及条件；</p>
                    <p>2.请您认真阅读并遵守本《华龄金管家入驻协议》以及所有已公示或将公示于华龄金管家商户网站及app或华龄金管家网站的规则、规范及流程。一经发现任何违规操作，华龄金管家将保留追究您责任的权利；</p>
                    <p>3.本协议及您与华龄金管家之间的关系，均受到中华人民共和国法律制约。您与华龄金管家就本协议或其它相关事项产生的争议，应首先友好协商解决，协商不成时应向华龄金管家所在地法院提起诉讼，诉讼结果终局性的，对双方均有约束力；</p>
                    <p>4.华龄金管家未行使或执行本使用协议任何权利或规定，不构成对前述权利或权利之放弃； </p>
                    <p>5.若本使用协议的任何规定因与中华人民共和国法律抵触而无效，您依然同意，应依照法律，努力使该规定所反映的当事人意向具备效力，且本协议其它规定仍应具有完整的效力及效果；</p>
                    <p>6.本协议标题仅供方便而设，不具任何法律或契约效果；</p>
                    <p>7.只要您登录了华龄金管家，就代表您认可以上所有协议；</p>
                    <p>8.华龄金管家对本协议享有最终解释权。</p>
                    <p>请确认您已经仔细阅读《华龄金管家入驻协议》及其附件的相关内容，同意遵守协议的相关约定</p>
                    <p>华龄金管家：杭州华龄集团有限公司</p>
                </div>
                <div class="btns">
                    <button @click="IKnow">我知道了</button>
                    <button @click="showClause">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Util from "../../common/util.js";
import $ from 'jquery';
export default {
    name: "loginApp",
    components: {},
    data() {
        return {
            newsFlag: false,
            visible: false,
            query: '',
            loginForm: {
                shop: '',
                tenantGroupId: 3, //商户系统
                username: '',
                password: '',
                tenantId: '', //运营系统为默认租户-1
                clause: true
            },
            vad: {
                isShow: false,
                message: ''
            },
            merchantsList: [],
            tempList: [],
            flag: false,
            clauseBox: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            const _this = this;
            let shop = window.localStorage.getItem("_SH_BUS_SHOP_"),
                tenantId = window.localStorage.getItem("_SH_BUS_BASETENANTID_");
            if (shop && tenantId) {
                _this.loginForm.tenantId = tenantId;
                _this.loginForm.shop = shop;
            }
            this.axios.get('/ws/api/ms/merchants/info').then(response => {
                var res = response.data;
                var resMeta = res.meta;
                if (0 == resMeta.code) {
                    _this.tempList = res.data;
                    _this.merchantsList = res.data;
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            });
            _this.center();
            $(window).resize(function() {
                _this.center();
            });
        },
        center() {
            var windowHeight = $(window).height(),
                windowWidth = $(window).width(),
                boxHeight = $('.box').height(),
                boxWidth = $('.box').width(),
                layerBoxHeight = $('.layer-box').height(),
                clauseLayerBoxHeight = $('.clause-layer-box').height(),
                layerBoxWidth = $('.layer-box').width()
            clauseLayerBoxWidth = $('.clause-layer-box').width();
            if (windowHeight > boxHeight && windowWidth > boxWidth) {
                var offset = (windowHeight - boxHeight) / 2;
                $('.container .box').css("margin", offset + "px auto");
            }
            if (windowHeight < boxHeight && windowWidth > boxWidth) {
                $('.container .box').css("margin", "80px auto");
            }
            if (windowHeight > boxHeight && windowWidth < boxWidth) {
                var offset = (windowHeight - boxHeight) / 2;
                $('.container .box').css("margin", offset + "px 0");
            }
            if (windowHeight < boxHeight && windowWidth < boxWidth) {
                $('.container .box').css("margin", "80px 0 80");
            }
            if (windowHeight > layerBoxHeight && windowWidth > layerBoxWidth) {
                var offset = (windowHeight - layerBoxHeight) / 2;
                $('.layer-box').css("margin", offset + "px auto");
            }
            if (windowHeight < layerBoxHeight && windowWidth > layerBoxWidth) {
                $('.layer-box').css("margin", "0px auto");
            }
            if (windowHeight > layerBoxHeight && windowWidth < layerBoxWidth) {
                var offset = (windowHeight - layerBoxHeight) / 2;
                $('.layer-box').css("margin", offset + "px 0");
            }
            if (windowHeight < layerBoxHeight && windowWidth < layerBoxWidth) {
                $('.layer-box').css("margin", "0px 0px");
            }
            if (windowHeight > clauseLayerBoxHeight && windowWidth > clauseLayerBoxWidth) {
                var offset = (windowHeight - clauseLayerBoxHeight) / 2;
                $('.clause-layer-box').css("margin", offset + "px auto");
            }
            if (windowHeight < clauseLayerBoxHeight && windowWidth > clauseLayerBoxWidth) {
                $('.clause-layer-box').css("margin", "0px auto");
            }
            if (windowHeight > clauseLayerBoxHeight && windowWidth < clauseLayerBoxWidth) {
                var offset = (windowHeight - clauseLayerBoxHeight) / 2;
                $('.clause-layer-box').css("margin", offset + "px 0");
            }
            if (windowHeight < clauseLayerBoxHeight && windowWidth < clauseLayerBoxWidth) {
                $('.clause-layer-box').css("margin", "0px 0px");
            }
        },
        isActive(item) {
            if (item.tenantId == this.loginForm.tenantId) {
                return true;
            } else {
                return false;
            }
        },
        /*文本框输入事件*/
        inpute(event) {
            let keyCode = event.keyCode;
            if (32 === keyCode) {
                event.preventDefault();
                return;
            }
            if (13 === keyCode) {
                this.login();
                return;
            }
            if (this.vad.isShow) {
                this.vad.isShow = false;
            }
        },
        /**
         * 本地校验服务
         */
        verification() {
            this.loginForm.username = this.loginForm.username.trim();
            this.loginForm.password = this.loginForm.password.trim();
            if (Util.vad.isBlank(this.loginForm.username) || Util.vad.isBlank(this.loginForm.password)) {
                this.showError('用户名和密码不能为空');
                return false;
            }
            return true;
        },
        verificationTenantId() {
            if (Util.vad.isBlank(this.loginForm.tenantId)) {
                this.showError('请选择商户');
                return false;
            }
            return true;
        },
        varificationClause() {
            if (!this.loginForm.clause) {
                this.showError('请勾选入驻协议');
                return false;
            }
            return true;
        },
        /**
         * 显示错误信息
         */
        showError(message_) {
            this.vad.isShow = true;
            this.vad.message = message_;
        },
        /**
         * 跳转到商户申请页面
         */
        jumpMerchantsSettled() {
            window.location.href = Util.settledPath();
        },
        /**
         * 登录接口
         */
        login() {
            if (!this.verificationTenantId()) {
                return;
            }
            if (!this.verification()) {
                return;
            }
            if (!this.varificationClause()) {
                return;
            }
            let obj = this;
            obj.flag = true;
            this.loginForm.username = this.loginForm.username.trim();
            this.loginForm.password = this.loginForm.password.trim();
            this.axios.post('/ws/oauth', this.loginForm).then(function(response) {
                obj.flag = false;
                let resData = response.data;
                if (0 === resData.meta.code) {
                    //登录成功
                    let tokenId = resData.data.tokenId;
                    localStorage.clear();
                    localStorage.setItem(Util.tokenKey(), tokenId);
                    window.location.href = Util.homePath();
                } else {
                    let errorMessage = resData.meta.message;
                    obj.showError(errorMessage);
                }
            }, function() {
                obj.flag = false;
            });
        },
        showLayer() {
            var _this = this;
            _this.visible = _this.visible ? false : true;
            if (_this.visible) {
                $("#ws-mask").fadeIn('normal', function() {
                    $("#ws-input-search").focus();
                    $("body").css("overflow", "hidden");
                    _this.center();
                });
            } else {
                $("#ws-mask").fadeOut('normal', function() {
                    $("body").css("overflow", "auto");
                    $("#input-user").focus();
                });

            }
        },
        doSelect(item) {
            this.loginForm.shop = item.shop;
            this.loginForm.tenantId = item.tenantId;
            window.localStorage.setItem("_SH_BUS_SHOP_", item.shop),
                window.localStorage.setItem("_SH_BUS_BASETENANTID_", item.tenantId);
            this.query = '',
                this.tempList = this.merchantsList;
            this.showLayer();
        },
        search() {
            this.tempList = this.merchantsList;
            let query = this.query;
            if (query !== '') {
                const list = this.tempList.map(item => {
                    return {
                        tenantId: item.tenantId,
                        shop: item.shop
                    };
                });
                this.tempList = list.filter(item => item.shop.toLowerCase().indexOf(query.toLowerCase()) > -1);
            } else {
                this.tempList = this.tempList;
            }
        },
        showClause() {
            var _this = this;
            _this.clauseBox = !_this.clauseBox;
            if (_this.clauseBox) {
                $("#ws-mask-clause-box").fadeIn('normal', function() {
                    $("body").css("overflow", "hidden");
                    _this.center();
                });
            } else {
                $("#ws-mask-clause-box").fadeOut('normal', function() {
                    $("body").css("overflow", "auto");
                });

            }
        },
        IKnow() {
            this.loginForm.clause = true;
            this.showClause();
        }
    }
};
</script>
<style scoped>
.btnDisabled {
    cursor: not-allowed!important;
    background: #ccc!important;
}

.cl:after,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.cl,
.clearfix {
    zoom: 1;
}

.left {
    float: left;
}

.right {
    float: right;
}

.container {
    box-sizing: border-box;
    overflow: auto;
}


.container .box .contact-us {
    position: absolute;
    width: 100%;
    min-width: 948px;
    top:-60px;
    text-align: right;
    color:#666;
    font-size: 24px;
}

.container .box .contact-us span {
    margin: 0 20px 0 6px;
    font-size: 24px;
    color: #333;
}

.container .box {
    height: 624px;
    width: 948px;
    background: #fff;
    margin: 100px auto;
    position: relative;
}

.container .box .title-box {
    height: 104px;
    line-height: 104px;
    width: 856px;
    margin: 0 auto;
    border-bottom: 1px solid #f2f2f2;
}

.container .box .title-box .txt-box .logo-icon {
    margin-left: 188px;
}

.container .box .title-box .txt-box .logo-icon img {
    width: 55px;
    height: 55px;
    margin-top: 24px;
}

.container .box .title-box .txt-box .title {
    font-family: "Microsoft Yahei", "微软雅黑";
    margin-left: 15px;
    font-style: normal;
    font-size: 33px;
    color: #333;
}

.container .box .img-login-box {
    width: 856px;
    margin: 26px auto 0;
}

.container .box .img-login-box .img-box img {
    width: 428px;
    height: 408px;
}

.container .box .img-login-box .login-box {
    margin-left: 46px;
    width: 364px;
}

.container .box .img-login-box .login-box .from-item {
    position: relative;
}

.container .box .img-login-box .login-box div.from-item:first-child {
    margin-top: 52px;
}

.container .box .img-login-box .login-box div.from-item:nth-child(5) {
    margin-top: 20px;
}

.container .box .img-login-box .login-box div.from-item:last-child {
    margin-top: 16px;
}

.container .box .img-login-box .login-box div.from-item+div {
    margin-top: 34px;
}

.container .box .img-login-box .login-box .from-item .input-icon {
    position: absolute;
    top: 10px;
    display: inline-block;
    width: 40px;
    height: 30px;
    z-index: 1;
    border-right: 1px solid #e8e8e8;
    line-height: 30px;
}

.container .box .img-login-box .login-box .from-item .ws-select-icon {
    position: absolute;
    top: 10px;
    right: 0px;
    display: inline-block;
    width: 40px;
    height: 30px;
    z-index: 1;
    border-left: 1px solid #e8e8e8;
    line-height: 30px;
    background: url(../../assets/images/login/icon-select.png) no-repeat center;
    background-size: 30px 30px;
    cursor: pointer;
}

.container .box .img-login-box .login-box .from-item .icon-merchant {
    background: url(../../assets/images/login/icon-merchant.png) no-repeat center;
    background-size: 30px 30px;
}

.container .box .img-login-box .login-box .from-item .icon-user {
    background: url(../../assets/images/login/icon-user.png) no-repeat center;
    background-size: 30px 30px;
}

.container .box .img-login-box .login-box .from-item .icon-password {
    background: url(../../assets/images/login/icon-password.png) no-repeat center;
    background-size: 24px 29px;
}

.container .box .img-login-box .login-box .from-item input.ws-input {
    width: 100%;
    height: 50px;
    border: 1px solid #e8e8e8;
    line-height: 50px;
    font-size: 20px;
    padding-left: 50px;
    color: #666;
}

.container .box .img-login-box .login-box .from-item input.ws-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.container .box .img-login-box .login-box .from-item .input-merchant {
    cursor: pointer;
    padding-right: 50px;
}

.container .box .img-login-box .login-box .from-item .ws-login-btn {
    width: 100%;
    height: 50px;
    background: #ed9d2c;
    border: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
}

.container .box .img-login-box .login-box .from-item .ws-clause {
    font-size: 16px;
    line-height: 30px;
}

.container .box .img-login-box .login-box .from-item .ws-clause input[type="checkbox"] {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.container .box .img-login-box .login-box .from-item .ws-clause span {
    cursor: pointer;
}

.container .box .img-login-box .login-box .from-item .ws-clause span i {
    font-style: normal;
    color: #FFA847;
}

.container .box .img-login-box .login-box .from-item .error-box {
    height: 30px;
    line-height: 30px;
    color: #FFA847;
    font-size: 16px;
}

.container .box .img-login-box .login-box .from-item .add-merchant a {
    font-size: 20px;
    color: #ed9d2c;
}

.container .box .news-box {
    width: 856px;
    margin: 18px auto 0;
}

.container .box .news-box .news-txt {
    width: 428px;
    max-height: 60px;
    font-size: 16px;
    line-height: 28px;
    color: #666;
    overflow: hidden;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    z-index: 999;
    display: none;
    box-sizing: border-box;
    overflow: auto;
}

.mask .layer-box,
.mask .clause-layer-box {
    max-width: 1200px;
    width: 80%;
    min-width: 960px;
    max-height: 648px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 25px 1px #959595;
    /* margin: 100px auto; */
}

.mask .layer-box .close-box,
.mask .clause-layer-box .close-box {
    width: 100%;
    height: 52px;
}

.mask .layer-box .close-box img,
.mask .clause-layer-box .close-box img {
    cursor: pointer;
    width: 52px;
    height: 100%;
}

.mask .clause-layer-box .content-box {
    margin: 20px 0 0;
    padding: 0 30px;
    max-height: 500px;
    overflow: auto;
}

.mask .clause-layer-box .content-box h2 {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 8px;
}

.mask .clause-layer-box .content-box p {
    text-indent: 30px;
    line-height: 20px;
    font-size: 14px;
}

.mask .clause-layer-box .content-box p+p {
    margin-top: 4px;
}

.mask .clause-layer-box .content-box h3 {
    line-height: 40px;
    font-size: 16px;
}

.mask .clause-layer-box .content-box h4 {
    line-height: 35px;
    font-size: 14px;
}

.mask .clause-layer-box .btns {
    margin: 20px 0;
    padding-bottom: 20px;
    text-align: center;
}

.mask .clause-layer-box .btns button {
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    margin: 0 5px;
}

.mask .clause-layer-box .btns button:first-child {
    background: #FFA847;
}

.mask .clause-layer-box .btns button:last-child {
    background: #ccc;
}

.mask .layer-box .search-box {
    position: relative;
    width: 70%;
    max-width: 752px;
    height: 66px;
    line-height: 66px;
    margin: 24px auto;
}

.mask .layer-box .search-box input[type="text"] {
    padding-left: 58px;
    font-size: 33px;
    width: 85%;
    max-width: 644px;
    height: 66px;
    color: #333;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 0 1000px #fff inset;
}

.mask .layer-box .search-box .icon-search {
    position: absolute;
    display: inline-block;
    top: 19px;
    left: 18px;
    width: 28px;
    height: 28px;
    background: url(../../assets/images/login/icon-search.png) no-repeat center;
    background-size: 28px 28px;
}

.mask .layer-box .search-box .ws-search-btn {
    vertical-align: top;
    text-align: center;
    width: 14.5%;
    max-width: 104px;
    height: 100%;
    border: none;
    background: #ed9d2c;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
}

.mask .layer-box .ws-line {
    width: 95%;
    margin: 42px auto 0;
    border-bottom: 1px solid #e8e8e8;
}

.mask .layer-box .display-box {
    width: 95%;
    max-height: 464px;
    padding: 15px 0;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: auto;
}

.mask .layer-box .display-box ul li {
    display: inline-block;
    padding: 22px;
    border: 1px solid #ed9d2c;
    font-size: 22px;
    color: #ed9d2c;
    margin: 15px 14px 15px 0;
    cursor: pointer;
}

.mask .layer-box .display-box ul li:hover {
    color: #d60;
    border: 1px solid #d60;
}

.mask .layer-box .display-box ul li.wsActive {
    color: #d60;
    border: 1px solid #d60;
}

.mask .layer-box .display-box .ws-empty {
    font-size: 22px;
    margin-top: 30px;
    color: #c33;
    text-align: center;
}

.mask .layer-box .display-box::-webkit-scrollbar,
.mask .clause-layer-box .content-box::-webkit-scrollbar {
    width: 0px;
}
</style>